<template>
  <div class="panel-info">
    <div class="panel-split"></div>
    <div class="panel-body">
      <div class="panel-body-left">
        <div
          class="sidebar-item"
          v-for="item in mapCategory"
          :key="item.key"
          :class="item.key === activeKey ? 'active' : ''"
          @click="() => setActive(item.key)"
        >
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="panel-body-right">
        <div class="grid-wrap">
          <div class="grid-item" v-for="(list, index) in dataList" :key="index">
            <div
              class="icon-wrap"
              :data-panel="JSON.stringify(list)"
              draggable
              @dragstart="onDragStart"
            >
              <img class="icon" :src="require(`@/assets/png/${list.icon}.png`)" alt="" />
            </div>
            <div class="title">{{ list.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import { getService, addPanelTag } from '@/service';
import { round } from 'lodash';
import { messageUtil } from '@jl/element-plus/utils';
import { generateListLayerName } from '@/service/layer';

defineOptions({
  name: 'ScenePanel',
});

const mapCategory = [
  {
    key: 'icon',
    title: '图标',
  },
  {
    key: 'chart',
    title: '图表',
  },
  {
    key: 'text',
    title: '文本',
  },
  {
    key: 'highComponent',
    title: '高级组件',
  },
  {
    key: 'basicInteraction',
    title: '基础交互',
  },
  {
    key: 'thirdComponent',
    title: '第三方组件',
  },
  {
    key: 'myUpload',
    title: '我的上传',
  },
];

const keyword = ref('');
const activeKey = ref('myUpload');
const sceneStore = useSceneStore();

const setActive = (key: string) => {
  activeKey.value = key;
};

const data = ref<any>([
  // {
  //   code: '充电桩',
  //   name: '用电量组件',
  //   icon: 'icon1',
  //   fieldDef: [
  //     { label: '名称', value: 'field1' },
  //     { label: '值', value: 'field2' },
  //   ],
  // },
  // {
  //   code: '光伏',
  //   name: '发电量组件',
  //   icon: 'icon2',
  //   fieldDef: [
  //     { label: '名称', value: 'field1' },
  //     { label: '值', value: 'field2' },
  //   ],
  // },
  {
    code: '1',
    name: '四值翻页器',
    icon: 'icon6',
    fieldDef: [
      { label: '名称', value: 'field1' },
      { label: '指标', value: 'field2' },
      { label: '单位', value: 'field3' },
      { label: '值', value: 'field4' },
    ],
    attr: {
      styleType: '',
      alpha: 100,
      width: 0,
      height: 0,
    },
  },
]);

const dataList = computed(() => {
  if (activeKey.value === 'myUpload') {
    return data.value.filter((item: any) => item.name.indexOf(keyword.value) > -1);
  }
  return [];
});

onMounted(() => {
  nextTick(() => {
    document.getElementById('cesiumContainer')!.addEventListener('dragover', onDragover);
    document.getElementById('cesiumContainer')!.addEventListener('drop', onDrop);
  });
});

onBeforeUnmount(() => {
  sceneStore.specialEffectVisible = false;
  document.getElementById('cesiumContainer')!.removeEventListener('dragover', onDragover);
  document.getElementById('cesiumContainer')!.removeEventListener('drop', onDrop);
});

function onDragStart(e: DragEvent) {
  const dataTransfer: any = e.dataTransfer;
  dataTransfer.setData('panel', (e.currentTarget as any).dataset.panel);
  dataTransfer.effectAllowed = 'move';
}

function onDragover(e: DragEvent) {
  e.preventDefault();
}

function onDrop(e: DragEvent) {
  const { cimInstance } = window;
  const dataTransfer = e.dataTransfer;
  const panelData = JSON.parse(dataTransfer!.getData('panel'));
  const targetPosition = cimInstance.api.screenToDegrees({
    x: e.clientX,
    y: e.clientY,
  });
  const name = generateListLayerName('div', undefined, panelData.name);
  const layerParam: any = {
    code: Math.random().toString().split('.')[1],
    show: true,
    json: null,
    name,
    layerName: name,
    desc: '',
    type: 'div',
    attr: {
      position: [targetPosition[0], targetPosition[1], 10],
      translation: [0, 0, 0],
      rotation: [0, 0, 0],
      scale: 1,
      color: '',
      styleType: '3d',
      alpha: 100,
      width: 267,
      height: 202,
    },
    effect: {
      dataType: '2', // 1静态数据2动态数据
      request: {
        method: 'GET',
        url: '',
        ticket: '',
        data: '',
        refrush: 0,
        isRefrush: false,
      },
      fieldDef: panelData.fieldDef,
      dataMapping: {},
      requestData: [],
      list: [], // 判定器列表
      deviceCode: '', // 设备编码
      moduleName: '', // 模块名称
    },
  };
  addPanelTag({
    longitude: targetPosition[0],
    latitude: targetPosition[1],
    height: 10,
    ...layerParam,
  });
  sceneStore.layerList.unshift(layerParam);
  sceneStore.specialEffectVisible = true;
  sceneStore.selLayer = sceneStore.layerList[0];
  e.preventDefault();
}
</script>

<style lang="less" scoped>
.panel-info {
  height: 100%;
  .panel-split {
    height: 10px;
    background-color: rgb(23, 26, 31);
  }
  .panel-body {
    display: flex;
    height: calc(100% - 10px);
    .panel-body-left {
      width: 98px;
      background: #14161a;
      overflow-y: auto;
      .sidebar-item {
        width: 100%;
        padding: 15px 10px 15px 15px;
        font-weight: 400;
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
        &.active {
          color: var(--el-color-primary);
          background: #0a0b0d;
        }
      }
    }
    .panel-body-right {
      flex: 1;
      padding: 20px 20px 20px 16px;
      overflow-y: auto;
      .grid-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .grid-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          user-select: none;
          .icon-wrap {
            position: relative;
            width: 100%;
          }
          .icon {
            width: 100%;
          }
          .title {
            margin-top: 10px;
            pointer-events: none;
          }
        }
      }
    }
  }
}
</style>
